<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>咕咕牛 - 模拟触发列表</title>
    <style>
        @font-face {
            font-family: 'Orbitron';
            font-style: normal;
            font-weight: 700;
            font-display: swap;
            src: url('{{guguniu_res_path}}html/fonts/Orbitron-Bold.woff2') format('woff2');
        }

        @font-face {
            font-family: 'Noto Sans SC';
            font-style: normal;
            font-weight: 700;
            font-display: swap;
            src: url('{{guguniu_res_path}}html/fonts/NotoSansSC-Bold.woff2') format('woff2');
        }

        @font-face {
            font-family: 'Noto Sans SC';
            font-style: normal;
            font-weight: 400;
            font-display: swap;
            src: url('{{guguniu_res_path}}html/fonts/NotoSansSC-Regular.woff2') format('woff2');
        }

        :root {
            --bg-color: #1a1f2e;
            --container-bg: #22283a;
            --card-bg: #2d344a;
            --header-bg: #1e2436;
            --text-primary: #e0e5f0;
            --text-secondary: #9fadca;
            --accent-color: #43d8b8;
            --accent-glow: rgba(67, 216, 184, 0.15);
            --color-error: #e74c3c;
            --color-report: #3498db;
            --color-logic: #f1c40f;
        }

        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        body {
            font-family: 'Noto Sans SC', sans-serif;
            background-color: var(--bg-color);
            color: var(--text-primary);
            padding: 20px;
            width: 920px;
            margin: 20px auto;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }

        .container {
            background-color: var(--container-bg);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 12px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.3);
            overflow: hidden;
            background-image:
                repeating-linear-gradient(45deg, rgba(167, 169, 173, 0.02) 0, rgba(167, 169, 173, 0.02) 1px, transparent 1px, transparent 30px);
            background-size: 30px 30px;
        }
        
        .header {
            background-color: var(--header-bg);
            padding: 25px 30px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
            clip-path: polygon(0 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%);
        }

        .header h1 {
            font-family: 'Orbitron', sans-serif;
            font-size: 24px;
            font-weight: 700;
            color: var(--text-primary);
            text-shadow: 0 0 8px var(--accent-glow);
            letter-spacing: 1px;
            margin: 0;
        }

        .header .subtitle {
            font-size: 13px;
            color: var(--text-secondary);
            margin-top: 5px;
        }

        .header-bottom-deco {
            height: 3px;
            margin-top: 15px;
            background: linear-gradient(90deg, var(--accent-color), transparent);
            opacity: 0.5;
        }
        
        .main-content {
            padding: 30px;
        }
        
        .section {
            margin-bottom: 35px;
        }
        .section:last-child {
            margin-bottom: 0;
        }

        .section-title {
            font-size: 20px;
            font-weight: 700;
            color: var(--text-primary);
            margin-bottom: 20px;
            display: flex;
            align-items: center;
            gap: 12px;
        }
        .section-title .en-text {
            font-family: 'Orbitron', monospace;
            font-size: 18px;
            opacity: 0.7;
        }
        .section-title::before {
            content: '';
            display: block;
            width: 6px;
            height: 24px;
            background-color: var(--accent-color);
            clip-path: polygon(0 0, 100% 25%, 100% 75%, 0 100%);
        }
        
        .trigger-list {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 15px;
        }

        .trigger-item {
            background-color: var(--card-bg);
            border-radius: 8px;
            display: flex;
            align-items: center;
            gap: 15px;
            padding: 15px;
            border: 1px solid rgba(255, 255, 255, 0.1);
        }
        
        .id-badge {
            flex: 0 0 60px;
            height: 60px;
            display: flex;
            justify-content: center;
            align-items: center;
            font-family: 'Orbitron', monospace;
            font-size: 22px;
            font-weight: 700;
            color: #fff;
            border-radius: 4px;
        }
        
        .category-error .id-badge { background-color: var(--color-error); }
        .category-report .id-badge { background-color: var(--color-report); }
        .category-logic .id-badge { background-color: var(--color-logic); }
        
        .item-content {
            flex-grow: 1;
        }
        
        .trigger-name {
            font-size: 15px;
            font-weight: 700;
            margin-bottom: 4px;
            color: var(--text-primary);
        }
        
        .trigger-desc {
            font-size: 13px;
            color: var(--text-secondary);
            line-height: 1.5;
        }
        
        .footer {
            text-align: center;
            padding: 20px;
            font-size: 14px;
            color: var(--text-secondary);
            border-top: 1px solid rgba(255, 255, 255, 0.1);
            font-family: 'Orbitron', monospace;
        }
    </style>
</head>

<body style="{{ scaleStyleValue }}">
    <div class="container">
        <header class="header">
            <h1>TRIGGERABLE ITEMS</h1>
            <div class="subtitle">模拟触发列表 / 使用 #咕咕牛触发+ID 触发</div>
            <div class="header-bottom-deco"></div>
        </header>

        <main class="main-content">
            {{ each categories category index }}
                <div class="section category-{{ category.className }}">
                    <h2 class="section-title">{{ category.name }} <span class="en-text">// {{ category.en_name }}</span></h2>
                    <div class="trigger-list">
                        {{ each category.items item }}
                        <div class="trigger-item">
                            <div class="id-badge">{{ item.id }}</div>
                            <div class="item-content">
                                <div class="trigger-name">{{ item.name }}</div>
                                <div class="trigger-desc">{{ item.description }}</div>
                            </div>
                        </div>
                        {{ /each }}
                    </div>
                </div>
            {{ /each }}
        </main>

        <footer class="footer">
            Miao-Plugin-MBT v{{ pluginVersion }}
        </footer>
    </div>
</body>

</html>